<!DOCTYPE html>
<html lang="en">
    <head>
        <title>登录</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <% include("/common/common_css_js.html"){} %>
        <script src="https://www.jq22.com/jquery/three.min.js"></script>
        <link rel="shortcut icon" href="${base!}/hymj/images/logo.ico" type="image/x-icon" />
        <style>
            body {
                margin: 0 auto;
                overflow: hidden;
                background: linear-gradient(to bottom, #19778c, #095f88);
                background-size:1400% 300%;
                animation: dynamics 6s ease infinite;
                -webkit-animation: dynamics 6s ease infinite;
                -moz-animation: dynamics 6s ease infinite;
                font-size: 14px;
                color: #ffffff;
                min-height: 700px;
            }
            /*登录样式*/
            .main {
                width: 80%;
                height: auto;
                /*下面是核心代码*/
                margin: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;



                display: flex;
                align-content: center;
                flex-direction: column;
            }

            @keyframes dynamics {
                0% {
                    background-position: 0% 0%;
                }
                50% {
                    background-position: 50% 100%;
                }
                100% {
                    background-position: 100% 0%;
                }
            }

            .log-con >span {
                font-size: 30px;
                font-weight: bold;
                line-height: 24px;
                letter-spacing: 2px;
                display: block;
                margin: 20px 0 44px 0;
            }
            .log-con >span::after {
                display: block;
                content: '';
                width: 57px;
                height: 3px;
                background: #ffffff;
                margin-top: 16px;
                justify-content: center;
                position: relative;
                left: 206px;
            }
            .log-con>input {
                display: block;
                margin: 10px 0 32px 70px;
                width: 330px;
                height: 42px;
                background-color: #ffffff;
                border-radius: 4px;
                opacity: 0.9;
                border: 0;
                font-size: 16px;
                outline: none;
                padding-left: 10px;
                color: #000000;
            }
            #verification {
                display: inline;
                width: 158px;
                height: 42px;
                margin-top: 0.45px;
                margin-left: -3px;
            }

            input::-webkit-input-placeholder {
                color: #000000;
                font-size: 16px;
            }
            .log-con>.code {
                width: 164px;
                display: inline-block;
                margin-left: 6px;
            }
            /*logo*/
            .logo {
                width: 100%;
                height: 75px;
                margin-top: 100px;
                font-size:30px;
            }
            .logo>img {
                max-width: 100%;
                max-height: 100%;
            }


            .mainForm{
                margin-top: 20px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }


            /*版权样式*/
            .copyright {
                position: absolute;
                bottom: 10px;
                width: 100%;
                font-size: 16px;
                text-align: center;
            }

            * {
                margin: 0;
                padding: 0
            }
            ul li {
                list-style: none
            }
            img {
                border: 0;
                max-width: 100%;
            }
            a {
                text-decoration: none;
                color: #333
            }
            body {
                font-family: "微软雅黑";
                width: 100%;
                margin: 0;
                width: 100%;
                height: 100vh;
                color: #fff;
                background-size: 400% 400%;
                animation: gradientBG 15s ease infinite;
                overflow: hidden
            }
            @keyframes gradientBG {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }
            a:hover {
                text-decoration: none;
                background: transparent;
            }
            .loginBox {
                margin-top: 20px;
                width: 500px;
                height: 450px;
                background-size: 100% 100%;
                overflow: hidden;
                background: linear-gradient(to bottom, #19778c, #095f88);
                animation: dynamics 6s ease infinite;
                -webkit-animation: dynamics 6s ease infinite;
                -moz-animation: dynamics 6s ease infinite;
                opacity: 0.9;
                border: solid 1px #13a1fc;
                background-size:1400% 300%;
                border-radius: 20px;
            }
            .loginBox h1 {
                color: #fff;
                text-align: center;
                font-weight: bold;
                font-size: 26px;
                margin-top: 40px;
                letter-spacing: 7px;
                margin-bottom: 40px
            }
            .loginBox .item {
                width: 360px;
                height: 45px;
                margin-left: 75px;
                border: 1px solid #1d90c5;
                margin-bottom: 22px;
                background: rgba(11,116,180,0.8);
                display: flex
            }
            .loginBox .item .icon {
                text-align: center;
                float: left;
                width: 45px;
            }
            .loginBox .item .icon img {
                display: block;
                width: 20px;
                margin-left: 13px;
                margin-top: 13px;
            }
            .loginBox .item .txt {
                flex: 1;
            }
            .loginBox .item .txt input {
                border: 0;
                background: none;
                outline: none;
                width: 100%;
                height: 45px;
                line-height: 45px;
                color: #fff;
                letter-spacing: 1px;
                font-size: 14px
            }
            .loginBox .item .yzm {
                float: right;
                width: 150px;
                /*overflow: hidden;*/
                /*padding-left: 10px*/
            }
            .loginBox .item .yzm img {
                display: block;
                width: 200px;
                height: 34px;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #fff;
                opacity:1;
            }

            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #fff;
                opacity:1;
            }
            input:-ms-input-placeholder {
                color: #fff;
                opacity:1;
            }
            input::-webkit-input-placeholder {
                color: #fff;
                opacity:1;
            }
            .loginBox .item_2 {
                width: 300px;
                margin-left: 105px;
                overflow: hidden;
                padding-bottom: 20px
            }
            .loginBox .item_2 a {
                float: right;
                color: #fff;
                font-size: 12px
            }
            .loginBox .item_2 input {
                float: left;
            }
            .loginBox .item_2 span {
                float: left;
                color: #fff;
                font-size: 12px
            }
            .loginBox .item_3 {
                width: 360px;
                margin-left: 75px;
                overflow: hidden
            }
            .loginBox .item_3 .btn {
                width: 360px;
                height: 45px;
                background: #3FB5E3;
                border: 0;
                outline: none;
                text-align: center;
                line-height: 45px;
                color: #fff;
                letter-spacing: 2px;
                font-size: 16px;
                font-weight: bold;
                border: 1px solid #1d90c5;
                margin-bottom: 10px;
                cursor: pointer
            }
            input[type=checkbox] {
                margin-right: 5px;
                cursor: pointer;
                font-size: 14px;
                width: 11px;
                height: 10px;
                position: relative;
            }
            input[type=checkbox]:after {
                position: absolute;
                width: 6px;
                height: 13px;
                top: 0;
                content: " ";
                background: rgba(11,116,180,1);
                border: 1px solid #1d90c5;
                color: #fff;
                display: inline-block;
                visibility: visible;
                padding: 0px 3px;
                border-radius: 3px;
            }
            input[type=checkbox]:checked:after {
                content: "✓";
                font-size: 12px;
            }

        </style>
    </head>
    <body>
        <div class="main">

            <div class="logo">
                <span>${company.name}</span><span style="color: yellow;font-size: 40px">TStar物流管理系统(旗舰版)</span>
                <span id="validDay" style="color:yellow;display: none;">系统有效期还有${validDays}天,请尽快联系维护人员！</span>
            </div>

            <div class="mainForm">
                <form action="${base!}/login/shiroLoginCheck" method="post" class="loginBox">
                    <h1>登录</h1>
                    <div class="item">
                        <div class="icon"><img src="${base!}/hymj/images/icon1.png" /></div>
                        <div class="txt"><input id="mobile" name="mobile"  type="text" placeholder="登录手机号" value=""/></div>
                    </div>
                    <div class="item">
                        <div class="icon"><img src="${base!}/hymj/images/icon2.png" /></div>
                        <div class="txt"><input id="passWord" name="passWord" type="password" placeholder="登录密码" value=""/></div>
                    </div>
                    <div class="item">
                        <div class="icon"><img src="${base!}/hymj/images/icon3.png" /></div>
                        <div class="txt">
                            <input id="checkCode" name="checkCode" type="text" placeholder="验证码" />
                        </div>
                        <img id="verification" style="margin-left: 10px" class="code" src="${base!}/login/kaptcha" style="cursor: pointer;" title="看不清？换一张" />
                    </div>
                    <div class="item_3">
                        <input name="" type="submit" value="登录" class="btn"/>

                        <input name="" type="reset" value="重填" class="btn"/>
                    </div>
                </form>
            </div>



            <div class="copyright">
                <a href="https://beian.miit.gov.cn" style="color: whitesmoke;text-decoration: none">${company.recordNo}</a>
                <span style="font-family:arial;">${company.copyright}</span>
            </div>
        </div>




        <script>

            let container;
            let camera, scene, renderer;
            let particles, particle, count = 0;
            let mouseX = 0, mouseY = 0;

            $(function () {

                // 刷新验证码
                $("#verification").bind("click", function () {
                    $(this).hide().attr('src', '${base!}/login/kaptcha?random=' + Math.random()).fadeIn();
                });

                if(!public_isEmpty("${errorMsg!}")){
                    mini.showMessageBox({
                        width: 250,
                        title: "登录提示",
                        buttons: ["ok"],
                        message: "${errorMsg!}",
                        showModal: false,
                        callback: function (action) {

                        }
                    });
                }

                if(!public_isEmpty("${validDays!}")){
                    let validDays = public_toNumber("${validDays!}");
                    if(validDays!=0){
                        $("#validDay").css("display","block");
                    }
                }

            });


        </script>
    </body>
</html>